<template>
  <div class="body">
    <header>
      <div class="logo">文创产品</div>
      <nav>
        <ul>
          <li><router-link to="/home">首页</router-link></li>
          <li><a href="">咨询</a></li>
          <li><a href="">联系</a></li>
        </ul>
      </nav>
    </header>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in images" :key="index">
          <img class="carousel-img" :src="item.img" alt="" />
          <div class="introduce">
            <p class="title">{{ item.title }}</p>
            <p class="topic">{{ item.topic }}</p>
            <p class="des">{{ item.text }}</p>
            <el-button type="success" round @click="ShowMore">查看更多</el-button>
          </div>
        </div>
      </div>
      <!-- <div class="swiper-button-prev nav-button"></div>
      <div class="swiper-button-next nav-button"></div> -->
    </div>
    <Foot></Foot>
  </div>
</template>

<script>
import Foot from '@/components/Footer'
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
export default {
  name: "MyWenchuang",
  components:{
      Foot
  },
  data() {
    return {
      swiper: null,
      images: [
        {
          img: require("@/assets/images/zong.png"),
          title: "文创赋能乡村美",
          topic: "三板村文创",
          text: "成太广场的杯子、广生桥的本子、幸福桥的扇子……一件件彰显着珠海市金湾区红旗镇三板村人文特色的地标或传统被设计成文创产品。",
        },
        {
          img: require("@/assets/images/book.png"),
          title: "文创产品",
          topic: "广生桥本",
          text: "广生桥是三板村乡村振兴工作的重要成果之一，粗粝的石栏杆和石桥面，透出浓浓的岭南风情。",
        },
        {
          img: require("@/assets/images/shan.png"),
          title: "文创产品",
          topic: "幸福桥扇",
          text: "幸福桥是三板村村民来往一河两岸的重要通道，后来被改造为人行桥，取名为“幸福桥”，寓意着幸福美满。",
        },
        {
          img: require("@/assets/images/bao.png"),
          title: "文创产品",
          topic: "赛龙舟帆布袋",
          text: "赛龙舟是三板村的文化传统，将其设计成文创产品印在了帆布袋上。",
        },
      ],
    };
  },
  mounted() {
    this.swiper = new Swiper(".swiper-container", {
      effect: "coverflow",
      slidesPerView: 2,
      centeredSlides: true,
      spaceBetween: 30,
      loop: true,

    //   navigation: {
    //     nextEl: ".swiper-button-next",
    //     prevEl: ".swiper-button-prev",
    //   },
    });
  },
  beforeDestroy() {
    // 在组件销毁前，销毁 Swiper 实例
    if (this.swiper) {
      this.swiper.destroy(true, true);
      this.swiper = null;
    }
  },
  methods:{
    ShowMore(){
      this.$router.push('/wcmore')
    }
  }
};
</script>

<style lang="less" scoped>
.body {
  margin: 0;
  // background-color: rgb(208, 255, 201);
  background: linear-gradient(to top, #fcecfc 0%,#fd89d7 100%,#ff7cd8 100%); 
  font-family: Poppins;
}
header {
  width: 1140px;
  max-width: 90%;
  display: flex;
  justify-content: space-between;
  margin: auto;
  height: 50px;
  align-items: center;
}
header .logo {
  font-weight: bold;
}
header nav li {
  float: left;
  list-style: none;
}
header nav a {
  margin-left: 30px;
  text-decoration: none;
  color: #555;
  font-weight: 500;
}
.swiper-container {
  position: relative;
  width: 90%;
  height: 650px;
  overflow: hidden;
  margin-top: 10px;

  .swiper-wrapper {
    .swiper-slide {
      position: relative;
      width: 80%;
      height: 100%;
      font-size: 15px;
      margin: 0 15px;
      // background-color: #fdffe2;
      // background-color: blanchedalmond;

      .carousel-img {
        width: 48%;
        position: absolute;
        right: 0;
        top: 50%;
        margin: 0 20px;
        transform: translateY(-50%);
      }
      .introduce {
        opacity: 1;
        width: 48%;
        pointer-events: auto;
        margin-left: 5px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);

        .title {
          font-size: 2em;
          font-weight: 500;
          line-height: 1em;
          margin: 5px 0;
        }
        .topic {
          font-size: 4em;
          font-weight: 500;
          margin: 5px 0;
        }
        .des {
          font-size: small;
          color: #5559;
        }
      }
    }
  }
  .nav-button {
    margin-top: 20px;
  }
}
</style>
